<template>
  <div class="payInfo" v-if="!isWX">
    <navBar :title="number" @onClickLeft="onClickLeft" />
    <div class="payInfo-content">
      <van-cell :border="false" title="报销地点" :value="detail.goodsDetailJson && JSON.parse(detail.goodsDetailJson).company_title" />
      <van-cell :border="false" title="代办事项" :value="detail.goodsDetailJson && JSON.parse(detail.goodsDetailJson).service_project_title" />
      <van-cell :border="false" title="服务类型" :value="detail.goodsDetailJson && JSON.parse(detail.goodsDetailJson).expenseCate_title"  />
      <van-cell :border="false" title="服务时间" :value="time" />
      <van-cell :border="false" title="原价" :value="detail.original_price+'元'"  value-class='originPrice'/>
      <van-cell :border="false" title="应缴金额" :value="detail.real_price+'元'" />
      <van-cell :border="false" title="提交时间" :value="detail.order && detail.order.created_at" />
    </div>
    <div class="btn-box-flex">
      <van-button type="info" block @click="cancel" class="mb15" plain >取消支付</van-button>
      <van-button type="info" block @click="goPay">立即支付</van-button>
    </div>
  </div>
  <div v-else>

  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
import { getPayDetail, pay } from '@a/pay.js'
import config from '../../../public/config'
import { Dialog, Toast } from "vant";
import Axios from 'axios';
export default {
  components: {
    navBar,
  },
  data() {
    return {
      pay_info_id: null,
      pay_type: null,
      detail: {},
      baseUrls: process.env.BASE_URL,
      front_url: null,
      order_id:null,
      isWX:false
    };
  },
  deactivated() {
    this.$destroy(true); //销毁组件
  },
  created () {
    this.init()
    let ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      this.isWX = true
    }
  },
  computed: {
    time() {
      return (this.detail.order && (this.detail.order.service_time || this.detail.order.rush_time || 0)) + "天";
    },
    number () {
       return (this.detail.order && this.detail.order.order_number) || ''
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    cancel () {
      this.$router.replace('/user/home');
    },
    // 去支付
    goPay() {
      let params = {
        pay_info_id: this.pay_info_id,
        front_url: this.front_url,
        pay_type: this.pay_type,
        pay_device: 1
      };
      // if (ua.match(/MicroMessenger/i) == "micromessenger") {
      //   alert('请复制接下来的链接到浏览器打开！')
      //   pay(params).then(res => {
      //     if (res.code == 200) {
      //       const div = document.createElement("div");
      //       div.innerHTML = res.data;
      //       document.body.appendChild(div);
      //       document.forms[0].submit();
      //     }
      //   });
      // } else {
        pay(params).then(res => {
          if (res.code == 200) {
            const div = document.createElement("div");
            div.innerHTML = res.data;
            document.body.appendChild(div);
            document.forms[0].submit();
          }
        });
      // }
    },
    // 获取订单支付信息
    init () {
      if (this.$route.query && this.$route.query.pay_info_id) this.pay_info_id = this.$route.query.pay_info_id
      if (this.$route.query && this.$route.query.pay_type) this.pay_type = this.$route.query.pay_type
      if (this.$route.query && this.$route.query.front_url) this.front_url = this.$route.query.front_url
      // if (this.$route.query && this.$route.query.order_id) this.order_id = this.$route.query.order_id
      let params = {
        pay_info_id: this.pay_info_id
      }
      let url = config.get('app_url')+'v1100_payDetail'
      Axios.get(url,{params})
      .then (res => {
        res =  res.data
        this.detail = res.data
      })
      
    },
    
  },
  filters: {
    status(value) {
      switch (value) {
        case 1:
          return "待接单";
        case 2:
          return "已接单";
        case 3:
          return "用户待确认";
        case 4:
          return "已完成";
        case 5:
          return "未缴费";
      }
    },
    type(value) {
      switch (value) {
        case 1:
          return "专利";
      }
    },
    project(value) {
      switch (value) {
        case 1:
          return "签字";
        case 2:
          return "报销";
        case 3:
          return "签字和报销";
      }
    },
  },
};
</script>

<style lang='less'>
.payInfo {
  &-content {
    .originPrice {
      span {
        text-decoration:  line-through;
      }
    }
  }

}
</style>